<!-- 资金列表 -->
<template>
  <!-- <page-loading :show="pageLoading"> -->
  <view class="page-wrap">
    <view class="page-top" v-show="!(showDefaultImg && !fundsTypeIndex)">
      <view class="page-top-inner" @click="showTypes">
        <text class="title font-28 color-333">{{ fundsTypeTitle }}</text>
        <view class="icon-show" :class="{ 'show-types': isShowTypeSelector }">
          <u-icon name="arrow-down-fill" color="#999" size="20rpx"></u-icon>
        </view>
      </view>
    </view>
    <view class="fixed-title" v-if="!showDefaultImg" @click="showDateSelector">
      <view class="mounth flex">
        <text class="font-30 color-333 font-bold pr-10"
          >{{ current.year }}年{{ current.month }}月</text
        >
        <u-icon name="arrow-down-fill" color="#999" size="20rpx"></u-icon>
      </view>
      <view class="font-24 color-666">
        <text v-if="incomeOrExpense !== -1" class="pr-10"
          >收入 ￥{{ current.inputMoney }}
        </text>
        <text v-if="incomeOrExpense !== 1">支出￥{{ current.outMoney }}</text>
      </view>
    </view>
    <scroll-view
      v-if="!showDefaultImg"
      class="list-wrap"
      id="scrollId"
      :scroll-y="true"
      @scroll="scroll"
      @scrolltolower="onreachBottom"
    >
      <view class="list" v-for="(data, index1) in list" :key="index1">
        <view class="list-title" :id="'title' + index1">
          <view class="mounth flex" @click="showDateSelector">
            <text class="font-30 color-333 font-bold pr-10"
              >{{ Number(data.month) }}月</text
            >
            <u-icon name="arrow-down-fill" color="#999" size="20rpx"></u-icon>
          </view>
          <view class="font-24 color-666">
            <text v-if="incomeOrExpense !== -1" class="pr-10"
              >收入 ￥{{ data.inputMoney }}
            </text>
            <text v-if="incomeOrExpense !== 1">支出￥{{ data.outMoney }}</text>
          </view>
        </view>
        <view v-if="data.datas.length">
          <view
            class="list-item border-b flex flex-ai-c"
            v-for="(item, index) in data.datas"
            :key="index"
            @click="gotoDatail(item)"
          >
            <view class="flex-1">
              <view class="color-333 font-28 pd-10">{{item.remark}}</view>
              <view class="color-999 font-24">{{
                dateFormat(item.addTime, 'MM-DD HH:mm')
              }}</view>
            </view>
            <view class="color-333 fant-bold font-36"
              ><text v-if="item.change > 0">+</text>{{ item.change }}</view
            >
          </view>
        </view>
        <view class="list-item" v-else>
          <view class="color-333 font-28 pd-10">暂无资金记录</view>
        </view>
      </view>
      <view
        class="list-end flex flex-ai-c flex-jc-c"
        v-if="!isMore && totalSize > 0"
      >
        <u-line color="#eee" length="120rpx" margin="20rpx"></u-line>
        <text class="color-999 font-24">没有更多了</text>
        <u-line color="#eee" length="120rpx" margin="20rpx"></u-line>
      </view>
    </scroll-view>
    <view v-else>
      <defaultImg msg="暂无交易记录"></defaultImg>
    </view>
    <u-popup
      v-model="isShowTypeSelector"
      mode="bottom"
      :zoom="false"
      border-radius="30"
      class="types-popup"
    >
      <view class="popup-title">选择交易类型</view>
      <view class="popup-content">
        <u-row justify="start">
          <u-col
            span="4"
            v-for="(item, index) in typesList"
            :key="index"
            @click="selTypes(index)"
          >
            <view
              class="popup-content-item"
              :class="{ active: index === fundsTypeIndex }"
              >{{ item.name }}</view
            >
          </u-col>
        </u-row>
      </view>
    </u-popup>

    <date-selector
      :showsc="isShowDateSelector"
      @confirmTime="confirmsc"
      @closeTime="closeTime"
    ></date-selector>
  </view>
  <!-- </page-loading> -->
</template>

<script>
import dateSelector from './components/dateSelector.vue'
import defaultImg from '../../components/defaultImg/defaultImg'
import { dateFormat } from '@/utils/formatDate.js'

export default {
  data() {
    return {
      pageLoading: false, //初始化加载效果
      isShowTypeSelector: false, //是否显示交易类型弹窗
      fundsTypeIndex: 0, // 选择的交易类型
      incomeOrExpense: 0, // 0 全部 1 收入 -1 支出
      isShowDateSelector: false, //是否显示月份选择弹窗
      selDate: '', //选择的月份时间
      pageIndex: 1, //页数
      showDefaultImg: false, //缺省也显示
      isMore: true, //是否有更多
      totalSize: 0, //总条数
      list: [],
      beginMonth: '', //当前最新月份
      titleList: [], //月份节点列表
      current: { year: '2021', month: '01', inputMoney: 0, outMoney: 0 }, //固定标题显示的月份信息
      // flowTypes: {
      //   10: '首购收益',
      //   20: '复购收益',
      //   30:  '流入复购收益',
      //   40: '流出复购收益',
      //   50:  '流入核销收益',
      //   60: '核销',
      //   70:  '流出核销',
      //   80: '提现',
      //   90: '退款',
      //   100: '佣金',
      //  110:  '别处复购收益',
      //    120:  '平台抽成',
      // },
    }
  },

  computed: {
    storeId() {
      return this.$store.state.userInfoDetail.store.storeId
    },

    //账号权限
    auth() {
      return uni.getStorageSync('Ztc_B_USER_INFO').permious
    },
    //交易类型
    typesList() {
      if (this.auth === 'Agency') {
        return [
          { name: '全部', type: -1, type2: 0 },
          { name: '佣金', type: -1, type2: 1 },
          { name: '提现', type: 80, type2: -1 },
          // { name: '退款', type: 90, type2: -1,  },
          // { name: '入驻', type: -1, type2: -1,  },
        ]
      }
      return [
        { name: '全部', type: -1, type2: 0 },
        { name: '首购收益', type: 10, type2: 1 },
        { name: '复购收益', type: 20, type2: 1 },
        { name: '流入复购收益', type: 30, type2: 1 },
        { name: '别处复购收益', type: 110, type2: 1 },
        { name: '流入核销收益', type: 50, type2: 1 },
        { name: '核销', type: 60, type2: 1 },
        { name: '流出核销', type: 70, type2: -1 },
        { name: '提现', type: 80, type2: -1 },
        // { name: '退款', type: 90, type2: -1,  },
      ]
    },

    fundsTypeTitle() {
      return this.fundsTypeIndex === 0
        ? '全部交易类型'
        : this.typesList[this.fundsTypeIndex].name
    },
  },

  onLoad() {
    setTimeout(() => {
      this.pageLoading = true
    }, 500)
    this.getList()
  },

  methods: {
    dateFormat,
    // 选择交易类型
    showTypes() {
      this.isShowTypeSelector = !this.isShowTypeSelector
    },

    //选择类型
    selTypes(index) {
      this.fundsTypeIndex = index
      this.incomeOrExpense = this.typesList[index].type2
      this.isShowTypeSelector = false
      this.pageIndex = 1
      this.beginMonth = ''
      this.list = []
      this.getList()
    },

    //显示日期选择弹窗
    showDateSelector() {
      this.isShowDateSelector = !this.isShowDateSelector
    },

    //取消选择
    closeTime() {
      this.isShowDateSelector = false
    },

    // 选择时间
    confirmsc(e) {
      this.selDate = e
      this.pageIndex = 1
      this.beginMonth = ''
      this.list = []
      this.getList()
    },

    //获取列表
    getList() {
      this.$api.washCar
        .getFlowList({
          pageIndex: this.pageIndex,
          pageSize: 10,
          store_Id: this.storeId,
          flowEnum: this.typesList[this.fundsTypeIndex].type, //-1 为全部 ， 10 首购收益 20 复购收益 30 流入复购收益 40 流出复购收益 50 流入核销收益 60 核销 70 流出核销 80 提现 90 退款
          year: this.selDate ? this.selDate.slice(0, 4) : '0',
          month: this.selDate ? this.selDate.slice(5, 7) : '0',
        })
        .then((res) => {
          if (this.pageIndex === 1 && !res.data.total) {
            if (this.selDate) {
              //按月份筛选
              this.beginMonth = this.selDate
              this.list.push({
                year: this.beginMonth.slice(0, 4),
                month: this.beginMonth.slice(5, 7),
                inputMoney: 0,
                outMoney: 0,
                datas: [],
              })
              this.current = {
                year: this.beginMonth.slice(0, 4),
                month: this.beginMonth.slice(5, 7),
                inputMoney: 0,
                outMoney: 0,
              }
            } else {
              //未按月份筛选
              this.showDefaultImg = true
            }
          } else {
            this.showDefaultImg = false

            if (!this.beginMonth && res.data.total) {
              this.beginMonth = res.data.list[0].addTime.slice(0, 7)
              this.list.push({
                year: this.beginMonth.slice(0, 4),
                month: this.beginMonth.slice(5, 7),
                inputMoney: 0,
                outMoney: 0,
                datas: [],
              })
              this.getMonthAggregate(0)
            }
            for (let i = 0; i < res.data.list.length; i++) {
              if (res.data.list[i].addTime.slice(0, 7) !== this.beginMonth) {
                this.beginMonth = res.data.list[i].addTime.slice(0, 7)
                this.list.push({
                  year: this.beginMonth.slice(0, 4),
                  month: this.beginMonth.slice(5, 7),
                  inputMoney: 213,
                  outMoney: 32,
                  datas: [],
                })
                this.getMonthAggregate(this.list.length - 1)
              }
              this.list[this.list.length - 1].datas.push(res.data.list[i])
            }
          }
          this.$nextTick(() => {
            this.getNodesInfo()
          })
          if (this.pageIndex * 10 < res.data.total) {
            this.pageIndex++
            this.isMore = true
          } else {
            this.isMore = false
          }
          this.totalSize = res.data.total
        })
        .catch((err) => {
          console.log(err)
        })
    },

    //收支汇总
    getMonthAggregate(i) {
      this.$api.washCar
        .getMonthAggregate({
          storeId: this.storeId,
          year: this.list[i].year,
          month: this.list[i].month,
          type: this.typesList[this.fundsTypeIndex].type,
        })
        .then((res) => {
          this.$set(this.list[i], 'inputMoney', res.data.inputMoney)
          this.$set(this.list[i], 'outMoney', res.data.outMoney)
          console.log(i)
          if (!i) {
            this.current = {
              year: this.list[i].year,
              month: this.list[i].month,
              inputMoney: this.list[i].inputMoney,
              outMoney: this.list[i].outMoney,
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },

    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.isMore) {
        this.getList()
      }
    },

    //滚动事件
    scroll(e) {
      let scrollTop = e.target.scrollTop
      for (let i = 0; i < this.titleList.length; i++) {
        let h1 = this.titleList[i]
        let h2 = this.titleList[i + 1]
        if (scrollTop >= h1 && scrollTop < h2) {
          this.current = {
            year: this.list[i].year,
            month: this.list[i].month,
            inputMoney: this.list[i].inputMoney,
            outMoney: this.list[i].outMoney,
          }
        }
        //解决滚动到最后选项左侧不会选中
        let length = this.titleList.length
        if (scrollTop >= this.titleList[length - 1]) {
          this.current = {
            year: this.list[length - 1].year,
            month: this.list[length - 1].month,
            inputMoney: this.list[length - 1].inputMoney,
            outMoney: this.list[length - 1].outMoney,
          }
        }
      }
    },

    getNodesInfo() {
      //获取节点为.right_title距离顶部的距离，返回值放在数组中
      const query = uni.createSelectorQuery().in(this)
      query
        .selectAll('.list-title')
        .boundingClientRect()
        .exec((res) => {
          let nodes = res[0]
          let rel = []
          nodes.map((item) => {
            rel.push(item.top - 50)
          })
          this.titleList = rel
        })
    },

    //跳转详情
    gotoDatail(item) {
      uni.navigateTo({
        url:
          '/pages_washCar/funds/fundsDetail?id=' +
          item.id +
          '&num=' +
          item.change,
      })
    },
  },

  components: {
    dateSelector,
    defaultImg,
  },
}
</script>

<style lang="scss" scoped>
.page-wrap {
  position: relative;
}

.fixed-title {
  position: absolute;
  top: 80rpx;
  left: 0;
  right: 0;
  z-index: 1;
}

.page-top {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: #fff;

  .page-top-inner {
    display: inline-block;
    position: relative;

    .title {
      padding-right: 20rpx;
    }

    .icon-show {
      display: inline-block;
      height: 28rpx;
      line-height: 28rpx;
      transition: all 0.3s;

      &.show-types {
        transform: rotate(180deg);
      }
    }
  }
}

.list-wrap {
  height: calc(100vh - 80rpx - 44px);
}

.list-title,
.fixed-title {
  background: #f6f6f6;
  padding: 28rpx 34rpx;

  .mounth {
    padding: 10rpx 0;
  }
  .pr-10 {
    padding-right: 10rpx;
  }
  .icon-show {
    // padding-left: 10rpx;
    transition: all 0.3s;
    height: 28rpx;
    line-height: 28rpx;

    &.show-types {
      transform: rotate(180deg);
    }
  }
}

.list {
  font-weight: 500;
  background: #fff;

  .list-item {
    padding: 25rpx 0;
    margin: 0 44rpx;

    .pd-10 {
      padding-bottom: 10rpx;
    }
  }
  .border-b {
    border-bottom: 2rpx solid #eee;
  }
}
.list-end {
  height: 77rpx;
}

// 交易类型弹窗
.types-popup {
  .popup-title {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 34rpx;
    color: #333;
    font-weight: 500;
    border-bottom: 2rpx solid #eee;
  }

  .popup-content {
    padding: 0 50rpx 40rpx;

    .popup-content-item {
      width: 200rpx;
      height: 100rpx;
      line-height: 100rpx;
      background: #f6f6f6;
      color: #666;
      border-radius: 10rpx;
      text-align: center;
      margin-top: 30rpx;

      &.active {
        background: #ffe23e;
        color: #333;
      }
    }
  }
}
</style>
